<template>
  <view class="categories">
    <!-- 搜索框 -->
    <Search></Search>
    <view class="main">
      <!-- 左侧菜单 -->
      <view class="menus">
        <view
          class="item"
          :class="cur === index ? 'active' : ''"
          v-for="(item, index) in menus"
          :key="item"
          @click="change(index)"
          >{{ item }}
        </view>
      </view>
      <!-- 右侧内容 -->
      <view class="concent">
        <view class="group" v-for="item1 in concent" :key="item1.cat_id">
          <!-- 标题  -->
          <view class="group-title">{{ item1.cat_name }}</view>
          <!-- 图片  -->
          <view class="group-concent">
            <navigator
              :url="`/pages/goods_list/goods_list?cid=${item2.cat_id}`"
              v-for="item2 in item1.children"
              :key="item2.cat_id"
            >
              <u-image :src="item2.cat_icon" width="120" height="120"></u-image>
              <view class="concent-text">
                {{ item2.cat_name }}
              </view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // categories: [],
      menus: [], //左侧菜单
      concent: [], // 右侧内容
      cur: 0, //默认第0个为红色
    };
  },
  async onLoad() {
    const res = await this.$u.get("/categories");
    this.categories = res.message;
    // console.log(res);
    this.menus = res.message.map((v) => v.cat_name);
    this.concent = res.message[0].children;
  },
  methods: {
    change(index) {
      console.log(index);
      // 通过下标，点击哪个，就哪个变红
      this.cur = index;
      // 点击切换右边内容
      this.concent = this.categories[index].children;
    },
  },
};
</script>

<style lang="scss">
.categories {
  .main {
    display: flex;
    height: calc(100vh - 80rpx);
    .menus {
      width: 182rpx;
      overflow: auto;
      .item {
        height: 70rpx;
        font-size: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .active {
        color: #ff2d4a;
      }
    }
    .concent {
      flex: 1;
      overflow: auto;
      .group {
        .group-title {
          height: 70rpx;
          font-size: 28rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          &::before {
            content: "/";
            margin-right: 10rpx;
          }
          &::after {
            content: "/";
            margin-left: 10rpx;
          }
        }
        .group-concent {
          display: flex;
          flex-wrap: wrap;
          padding: 0 48rpx;
          navigator {
            width: 120rpx;
            margin-right: 50rpx;
          }
          // 3倍数
          navigator:nth-child(3n) {
            margin-right: 0rpx;
          }
          .concent-text {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>